<template>
  <div class="container">
    <el-dialog
      title="供应商查询"
      :visible.sync="supplierdialog.centerDialogVisible"
      width="700px"
      center
      :lock-scroll="true"
      @close="cancel"
      @open="getSelect"
    >
      <div class="top">
        <el-select v-model="search.select" @change="clickSeelct">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input
          style="width: 200px; margin: 0 10px"
          v-model="search.value"
          placeholder="请输入内容"
        ></el-input>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          class="handleSearch"
          @click="handleSearch()"
          >查询</el-button
        >
        <el-button
          size="small"
          type="success"
          icon="el-icon-success"
          class="handleSearch"
          @click="checkAll"
          >全选</el-button
        >
        <el-button
          size="small"
          type="info"
          icon="el-icon-error"
          class="handleSearch"
          @click="deselectAll"
          >取消</el-button
        >
      </div>
      <div class="tagList">
        <el-tag
          v-for="tag in tags"
          :key="tag.name"
          closable
          @close="handleClose(tag)"
          >{{ tag.name }}</el-tag
        >
      </div>
      <el-table
        :data="formData"
        max-height="450px"
        border
        style="width: 100%; margin-top: 10px"
        ref="multipleTable"
        empty-text="暂无数据"
      >
        <el-table-column
          prop="orgarea_name"
          label="供应商所属区域"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="code"
          label="供应商编码"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="供应商名称"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              class="add"
              size="small"
              type="primary"
              icon="el-icon-circle-plus"
              :disabled="scope.row.selected"
              @click="add(scope)"
              >添加</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { supplierList } from "@/api/supplier/supplierList"; //供应商
export default {
  props: {
    supplierdialog: Object
  },
  data() {
    return {
      formData: null,
      options: [],
      search: {
        select: "",
        value: ""
      },
      tags: []
    };
  },
  methods: {
    handleSearch() {
      this.formData = [];
      this.getData();
    },
    getSelect() {
      this.options = [
        {
          value: "",
          label: "供应商名称"
        },
        {
          value: "1",
          label: "供应商编码"
        },
        {
          value: "2",
          label: "供应商所属区域"
        }
      ];
    },
    getData() {
      let data = {};
      switch (this.search.select) {
        case "":
          data = {
            name: this.search.value,
            code: "",
            orgarea_code: "",
            limit: 1000
          };
          break;
        case "1":
          data = {
            name: "",
            code: this.search.value,
            orgarea_code: "",
            limit: 1000
          };
          break;
        case "2":
          data = {
            name: "",
            code: "",
            orgarea_code: this.search.value,
            limit: 1000
          };
          break;
      }
      supplierList(data).then(res => {
        if (res.code == 0) {
          res.data.data.forEach(item => {
            item.selected = false;
          });
          this.formData = res.data.data;
        }
      });
    },
    clickSeelct() {
      this.search.value = "";
    },
    //添加
    add(scope) {
      let arr = this.tags.filter(res => {
        return res.id == scope.row.id;
      });
      if (arr.length > 0) {
        this.$message({
          type: "info",
          message: "该供应商已添加"
        });
      } else {
        this.tags.push({
          name: scope.row.name,
          id: scope.row.id,
          code: scope.row.id
        });

        this.formData.forEach(res => {
          if (res.id == scope.row.id) {
            res.selected = true;
          }
        });
      }
    },
    //删除
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1);
      this.formData.forEach(res => {
        if (res.id == tag.id) {
          res.selected = false;
        }
      });
    },
    //取消全选
    deselectAll() {
      this.tags = [];
      this.formData.forEach(res => {
        res.selected = false;
      });
    },
    // 全选
    checkAll() {
      this.tags = [];
      this.formData.forEach(res => {
        res.selected = true;
        this.tags.push({
          name: res.name,
          code: res.id,
          id: res.id
        });
      });
    },
    //确定
    confirm() {
      this.$emit("tag", this.tags);
      this.cancel();
    },
    //取消
    cancel() {
      this.search.value = "";
      this.formData = [];
      this.supplierdialog.centerDialogVisible = false;
      this.tags = [];
    }
    //选取
    // handleSelectionChange(data) {
    //   this.tags = [];
    //   data.forEach((res) => {
    //     this.tags.push({
    //       name: res.name,
    //       code: res.id,
    //       id: res.id,
    //     });
    //   });
    // },
  }
};
</script>
<style scoped>
.top {
  display: flex;
  /* justify-content: center; */
}
.tagList {
  margin-top: 10px;
}
.el-tag {
  margin-right: 5px;
  margin-top: 2px;
}
</style>
